<template>
	<view class="page">
		<hx-navbar title="授课信息" :fixed="true" bar-placeholder="hidden" transparent="auto"
			:background-color="[127, 74, 255,1]" color="#ffffff"
			:pageScroll.sync="scrollData"/>
			<view class="information-bg" :style="{'padding-top':statusBarHeight+16+'px'}">
				<view class="content">
					<!-- 基础信息 -->
					<view class="basic">
						<view class="f_36 navy_blue b-title b-b-ededed">基础信息</view>
						<!-- 授课语种 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_28 navy_blue">授课语种</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box">
								<text class="f_28" :class="language==''?'gery1':'navy_blue'">{{language==''?'请选择':language}}</text>
								<image :src="imgPrefix('/static/image/teacher/arrows.png')" mode=""></image>
							</view>
						</view>
						<!-- 语言水平 -->
						<view class="language-level-box b-b-ededed">
							<view class="title navy_blue f_28">语言水平</view>
							<view class=" dis-flex flex-x-between item-box">
								<view v-for="(level_item,level_index) in languageLevel" :key="level_index" :class="languageLevelIndex==level_index?'active':'acquiescence'"
								class="item" @click="languageLevelWay(level_index)">
									<text>{{level_item}}</text>
									<image v-if="languageLevelIndex==level_index" :src="imgPrefix('/static/image/teacher/check.png')" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 授课阶段 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_28 navy_blue">授课阶段</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box">
								<text class="f_28" :class="lecturePhase==''?'gery1':'navy_blue'">{{lecturePhase==''?'请选择':lecturePhase}}</text>
								<image :src="imgPrefix('/static/image/teacher/arrows.png')" mode=""></image>
							</view>
						</view>
						<!-- 授课方式 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_28 navy_blue">授课方式</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box">
								<text class="f_28" :class="lectureMode==''?'gery1':'navy_blue'">{{lectureMode==''?'请选择':lectureMode}}</text>
								<image :src="imgPrefix('/static/image/teacher/arrows.png')" mode=""></image>
							</view>
						</view>
						<!-- 授课语言 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_28 navy_blue">授课语言</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box">
								<text class="f_28" :class="lectureLanguage==''?'gery1':'navy_blue'">{{lectureLanguage==''?'请选择':lectureLanguage}}</text>
								<image :src="imgPrefix('/static/image/teacher/arrows.png')" mode=""></image>
							</view>
						</view>
						<!-- 线下旁听 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_28 navy_blue">线下旁听</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box" @click="auditWay()">
								<text class="f_28 gery1">允许家长旁听</text>
								<image class="arrows_icon" :src="audit?imgPrefix('/static/image/teacher/status_1.png'):imgPrefix('/static/image/teacher/status_0.png')" mode=""></image>
							</view>
						</view>
						<!-- 所选地址 -->
						<view class="dis-flex common-box" @tap.stop="closeBalanceLowPopup">
							<view class="l-title f_28 navy_blue">所在地址</view>
							<!-- <view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box" @click="auditWay()"> -->
								<view v-if="addressIndex!=-1"  class="dis-flex flex-x-between flex-dir-column flex-x-center b-b-ededed flex-box right-padding">
									<view class="detail dis-flex flex-x-end">
										<view class="detail onelist-hidden t-l f_28">
											<text>{{addressList[addressIndex].province.name}}</text>
											<text>{{addressList[addressIndex].city.name}}</text>
											<text>{{addressList[addressIndex].area.name}}</text>
											<text>{{addressList[addressIndex].address}}</text>
										</view>
										<image class="address-next" :src="imgPrefix('/static/image/teacher/arrows.png')" lazy-load></image></view>
									<view class="m-t-10 dis-flex flex-x-start f_28"><text class="m_r_18">{{addressList[addressIndex].username}}</text>{{addressList[addressIndex].phone}}</text></view>
								</view>
								<view v-else class="dis-flex flex-x-between b-b-ededed flex-box gery1 f_28 right-padding">
									请填写
									<image lazy-load class="address-next" :src="imgPrefix('/static/image/teacher/arrows.png')"></image>
								</view>
							<!-- </view> -->
						</view>
					</view>
					
					<!-- 课程价格 -->
					<view class="price">
						<view class="p-title b-b-ededed">课程价格</view>
						<view class="dis-flex flex-y-center flex-x-between class-time-box b-b-ededed">
							<view class="">
								<view class="f_28 navy_blue">课次时长</view>
								<view class="f_24 gery1">请填写每节课的时长，1小时/课次</view>
							</view>
							<view class="">
								<text>{{classTime}}小时</text>
								<image :src="imgPrefix('/static/image/icon/address_next.png')" mode=""></image>
							</view>
						</view>
						<!-- 课时金额 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_28 navy_blue">课时金额</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box">
								<input class="classprice f_28" :class="classPrice!=''?'':'input'" type="text" placeholder="请填写每课次金额，¥xx元/小时" placeholder-class="gery1 f_28" v-model="classPrice" /><text class="f_28 ff6f03" v-if="classPrice!=''">/小时</text>
								<!-- <text class="f_28" :class="classPrice==''?'gery1':'classprice'">{{classPrice==''?'请填写每课次金额，¥xx元/小时':classPrice}}</text> -->
							</view>
						</view>
					</view>
					<!-- 授课时间 -->
					<view class="teaching-time">
						<image :src="imgPrefix('/static/image/teacher/course_information_bg.png')" mode=""></image>
					</view>
				</view>
			</view>
			
			<!-- 地址选择 -->
			<zan-popup :show="showAddressPopup" type="bottom" @close="closeBalanceLowPopup">
				<view class="popup">
					<view class="p-head dis-flex  flex-y-center flex-x-center">
						<view class="f_32 flex-box t-c violet1">选择地址</view>
						<image :src="imgPrefix('/static/image/icon/address_close.png')" @tap.stop="closeBalanceLowPopup"></image>
					</view>
					<!-- 循环地址列表 -->
					<view class="addressList-box">
						<view class="item dis-flex flex-y-center" v-for="(item,index) in addressList" :key="index"  @tap.stop="change_status(item.address_id,index)">
							<view class="status">
								<image lazy-load :src="addressId!=item.address_id?imgPrefix('/static/image/icon/address_status_0.png'):imgPrefix('/static/image/icon/address_status_1.png')"></image>
							</view> 
							<view class="info flex-box" :style="index==addressList.length-1?'border-bottom: 0;':''">
								<view class="detail f_28 onelist-hidden">
									<text>{{item.province.name}}</text>
									<text>{{item.city.name}}</text>
									<text>{{item.area.name}}</text>
									<text>{{item.address}}</text>
								</view>
								<view class="dis-flex f_24 flex-x-between">
									<view class="f-c">
										<text class="m_r_24">{{item.username}}</text>
										<text>{{item.phone}}</text>
									</view>
									<view class="">
										<text @tap.stop="update(item,index)" class="m_r_40 f-c-1cbc7b">编辑</text>
										<text @tap.stop="del(item.address_id)" class="f-c-fb4e44">删除</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="btnbox" @tap.stop="pageTo('/pages/add_address/index')">
						<view class="btn f_32 dis-flex flex-y-center flex-x-center">
							新增地址
						</view>
					</view>
				</view>
			</zan-popup>
	</view>
</template>

<script>
	import zanPopup from '@/components/popup/index.vue';
import { statusBarHeight } from '@/static/mixins/statusBarHeight.js';
	export default {
		components: {
			zanPopup
		},
		mixins: [statusBarHeight],
		methods:{
			//语言水平tag切换
			languageLevelWay (index){
				this.languageLevelIndex=index 
			},
			//线下旁听状态
			auditWay(){
				this.audit=!this.audit
			},
			closeBalanceLowPopup(delay = 0) {
				setTimeout(() => {
					this.showAddressPopup = !this.showAddressPopup ;
				}, delay);
			},
			change_status(id,index){
				this.addressId=id
				this.addressIndex=index
				this.closeBalanceLowPopup()
			}, 
		},
		data() {
			return {
				id:'',
				statusBarHeight:'',
				scrollData:{},
				language:'',//授课语种
				languageLevelIndex:0,//语言水平选中下标
				languageLevel:['CET6','CET6','CET6','CET6','CET6','CET6','CET6'],//语言水平列表
				lecturePhase:'',//授课阶段
				lectureMode:'',//授课方式
				lectureLanguage:'',//授课语言
				audit:false,//线下旁听
				showAddressPopup:false,//地址弹出层
				addressIndex:-1,//选中地址下标
				addressId:'',///选中地址id
				addressList:[
					{
						province:{
							name:'广东省'
						},
						city:{
							name:'广州市'
						},
						area:{
							name:'海珠区'
						},
						address:'万胜围b口',
						username:'吴佳敏',
						phone:'123',
						address_id:1
					},
					{
						province:{
							name:'广东省'
						},
						city:{
							name:'广州市'
						},
						area:{
							name:'海珠区'
						},
						address:'万胜围b口',
						username:'无佳敏',
						phone:'1234',
						address_id:2
					}
				],
				classTime:5,//课次时长
				classPrice:'',//课时金额
			};
		},
		
		onPageScroll(e) {
			this.scrollData = e
		}
	}
</script>

<style lang="scss" scoped>
.b-b-ededed{
	border-bottom: 1px solid #ededed;
}
.ff6f03{
	color: #ff6f03;
}
.page{
	padding-bottom: 148rpx;
	.information-bg{
		background-image: linear-gradient(313deg, 
			#693ae6 0%, 
			#9564e6 100%);
			height: 126rpx;
			position: relative;
			padding-bottom: 95rpx;
	}
	.content{
		width: 654rpx;
		position: absolute;
		border-bottom: 16rpx solid #f4f4f4;	
		margin: 0 48rpx;
		// 基础信息
		.basic{
			padding: 0 32rpx 26rpx 32rpx;
			box-shadow: 0rpx 0rpx 40rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 32rpx;
			background-color: #ffffff;
			.b-title{
				padding: 32rpx 0 26rpx 0;
			}
			.language-level-box{
				padding-bottom: 16rpx;
				.item-box{
					flex-wrap:wrap;
				}
				.item{
					width: 30%;
					margin-bottom: 16rpx;
					padding: 12rpx 0;
					text-align: center;
				}
				.active{
					background-color: rgba(127, 74, 255, 0.1);
					border-radius: 12rpx;
					border: solid 1rpx #9254ff;
					color: #9254ff;
					position: relative;
					image{
						position: absolute;
						right: 0;
						bottom: 0;
						width: 36rpx;
						height: 36rpx;
					}
				}
				.title{
					padding: 34rpx 0 18rpx 0;
				}
				.acquiescence{
					background-color: #ffffff;
					border-radius: 12rpx;
					border: solid 1rpx rgba(37, 39, 72, 0.3);
				}
			}
		}
		
		.common-box{
			.detail{
				width: 450rpx;
			}
			.right-box{
				line-height: 90rpx;
				height: 90rpx;
			}
			.l-title{
				height: 90rpx;
				width: 152rpx;
				line-height: 90rpx;
			}
			image{
				width: 32rpx;
				height: 32rpx;
			}
			.arrows_icon{
				width: 44rpx;
				height: 44rpx;
			}
			.right-padding{
				padding: 26rpx 0;
			}
		}
		// 课程价格
		.price{
			margin-top: 16rpx;
			padding: 0 32rpx 26rpx 32rpx;
			box-shadow: 0rpx 0rpx 40rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 32rpx;
			background-color: #ffffff;
			.p-title{
				padding: 32rpx 0 26rpx 0;
			}
			image{
				width: 32rpx;
				height: 32rpx;
			}
			.class-time-box{
				padding: 26rpx 0;
			}
			.classprice{
				color: #ff6f03;
			}
			.input{
				width: 100%;
			}
		}
		// 授课时间
		.teaching-time{
			height: 114rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 0rpx 40rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 32rpx;
			border: solid 3rpx #9254ff;
			position: relative;
			image{
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}
			
	}
}

// 地址弹出层样式
.popup{
		max-height: 862rpx;
		width: 750rpx;
		background: white;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		color: #252748;
		.p-head{
			height: 92rpx;
				image{
					position: relative;
					right: 48rpx;
					width: 32rpx;
					height: 32rpx;
				}
		}
		.btnbox{
			background-color: white;
			position: fixed;
			width: 750rpx;
			bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.btn{
				height: 92rpx;
				background-color: #f0f0f6;
				border-radius: 24rpx;
				margin: 48rpx;
				color: #252748;
			}
		}
		.addressList-box{
			padding-bottom: 188rpx;
			
			padding-left:48rpx ;
			max-height: 770rpx;
			overflow-y: scroll;
			.status{
				margin-right: 16rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			.info{
				border-bottom: 1px solid #ededed;
				padding: 32rpx 48rpx 32rpx 0;
				.detail{
					width: 600rpx;
					color: #252748;
					margin-bottom: 20rpx;
					text{
						margin-right: 10rpx;
					}
				}
				.f-c{
					color: #8f8f9a;
				}
			}
		}
	}
	.f-c-1cbc7b{
		color: #1cbc7b;
	}
	.f-c-fb4e44{
		color: #fb4e44;
	}
</style>
